<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="divWarehouse">
    <div class="divHead">
      <div class="el-row">
        <div class="el-col">
          <div class="divLable">仓库名称</div>
          <input
            type="text"
            placeholder="请输入"
            v-model="form.warehouseName"
          />
        </div>
        <div class="el-col">
          <div class="divLable">库区名称</div>
          <input type="text" placeholder="请输入" v-model="form.name" />
        </div>
        <div class="el-col">
          <div class="divLable">仓库状态</div>
          <el-select type="text" placeholder="请选择" v-model="form.status"
            ><el-option label="全部" value="123"></el-option
            ><el-option label="停用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </div>
        <div class="el-col">
          <div class="divLable"></div>
          <div class="divButton">
            <button
              class="unimportance"
              style="background-color: #ffb200"
              @click="search"
            >
              搜索
            </button>
            <button
              class="unimportance"
              style="margin-left: 30px"
              @click="rest"
            >
              重置
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="divContent">
      <button style="float: left" @click="$router.push('/newABC')">
        新增库区
      </button>
      <button
        style="
          float: right;
          background: #f8f5f5;
          color: #332929;
          margin-right: 30px;
        "
      >
        导入库区信息
      </button>
      <button style="float: right; background: #f8f5f5; color: #332929">
        下载库区模板
      </button>
      <el-table
        :data="tableData"
        border
        style="width: 100%; font-size: 12px"
        :row-style="{ height: '0px' }"
        :cell-style="{ padding: '0px' }"
      >
        <el-table-column label="序号" width="100">
          <template slot-scope="scope">
            <span v-text="getIndex(scope.$index)"></span>
          </template>
        </el-table-column>
        <el-table-column prop="warehouseName" label="所属仓库" width="170">
        </el-table-column>
        <el-table-column prop="code" label="库区编号" width="170">
        </el-table-column>
        <el-table-column prop="name" label="库区名称" width="170">
        </el-table-column>
        <el-table-column
          prop="temperatureType"
          label="温度类型"
          width="170"
          :formatter="temperatureType"
        >
        </el-table-column>
        <el-table-column
          prop="bearingType"
          label="承重类型"
          width="170"
          :formatter="bearingType"
        >
        </el-table-column>
        <el-table-column
          prop="useType"
          label="用途属性"
          width="170"
          :formatter="useType"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="库区状态"
          width="170"
          :formatter="status"
        >
        </el-table-column>
        <el-table-column prop="personName" label="负责人" width="170">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="170">
        </el-table-column>
        <el-table-column prop="includedNum" label="库位数量" width="170">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="170">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="text"
              size="small"
              class="operate"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              class="operate"
              @click="openUp(scope.row, 1)"
              v-show="scope.row.status == 0 ? true : false"
              >启用</el-button
            >
            <el-button
              type="text"
              size="small"
              class="operate"
              @click="openUp(scope.row, 0)"
              v-show="scope.row.status == 1 ? true : false"
              >停用</el-button
            >
            <el-button
              type="text"
              size="small"
              class="operate"
              @click="deleteFn(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagetool
        style="margin-top: 30px; margin-right: 450px"
        :total="counts"
        :paginationPage="tableData.page"
        :paginationPagesize="tableData.pagesize"
        @pageChange="pageChange"
        @pageSizeChange="pageSizeChange"
      />
    </div>
  </div>
</template>

<script>
import constants from '@/constant/status'
import pagetool from '@/components/page-tool.vue'
import { pageDetail, searchArea, changeWare1 } from '@/api/home'
export default {
  components: {
    pagetool
  },
  data () {
    return {
      page: {
        page: 1,
        pagesize: 10
      },
      tableData: [],
      counts: '',
      list: '',
      form: {
        warehouseName: '',
        status: '',
        name: '',
        page: 1,
        pagesize: 10
      }
    }
  },
  created () {
    this.warehouseList()
  },
  methods: {
    // 编辑
    handleClick (row) {
      this.$router.push({
        path: 'updateABC',
        query: {
          key: row
        }
      })
    },
    // 库区状态
    status (row, column, cellValue, index) {
      const obj = constants.status.find((item) => item.value === cellValue)
      return obj ? obj.label : ''
    },
    // 用途属性
    useType (row, column, cellValue, index) {
      const obj = constants.useType.find((item) => item.value === cellValue)
      return obj ? obj.label : ''
    },
    // 温度类型
    temperatureType (row, column, cellValue, index) {
      const obj = constants.temperatureType.find(
        (item) => item.value === cellValue
      )
      return obj ? obj.label : ''
    },
    // 承重类型
    bearingType (row, column, cellValue, index) {
      const obj = constants.bearingType.find(
        (item) => item.value === cellValue
      )
      return obj ? obj.label : ''
    },
    // 启用
    async openUp (row, publishState) {
      if (publishState === 0) {
        const a = {}
        a.id = row.id
        a.status = publishState
        this.$confirm('您确认停用嘛?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(async () => {
            console.log(a)
            // row.publishState = publishState
            await changeWare1(a)
            this.warehouseList()

            this.$message({
              type: 'success',
              message: '成功了!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '怎么取消了呢!'
            })
          })
      } else if (publishState === 1) {
        const a = {}
        a.id = row.id
        a.status = publishState
        this.$confirm('您确认启用嘛?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            // row.publishState = publishState
            await changeWare1(a)
            this.warehouseList()

            this.$message({
              type: 'success',
              message: '成功了!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '怎么取消了呢!'
            })
          })
      }
    },
    // 搜索
    async search () {
      const ress = await searchArea(this.form)
      this.tableData = ress.data.data.records
      this.counts = ress.data.data.total
    },
    // 重置
    rest () {
      this.form = {
        like_code: '',
        status: '',
        like_name: '',
        page: 1,
        pagesize: 10
      }
      this.warehouseList()
    },
    // 删除
    async deleteFn (row) {
      // await deleteFn(row.id)
      // this.warehouseList()
      // console.log(row)
      this.$notify({
        title: '警告',
        message: '演示系统，不支持此操作',
        type: 'warning'
      })
    },
    pageChange (val) {
      this.page.page = val
      this.warehouseList()
    },
    pageSizeChange (value) {
      this.page.pagesize = value
      this.warehouseList()
    },
    // 序号
    getIndex ($index) {
      return (this.page.page - 1) * this.page.pagesize + $index + 1
    },
    // 获取列表数据
    async warehouseList () {
      const res = await pageDetail(this.page)
      console.log(res.data.data.records)
      this.tableData = res.data.data.records
      this.counts = res.data.data.total
    }
  }
}
</script>

<style lang="scss" scoped>
.divWarehouse {
  margin: 20px;
  .divHead {
    height: 80px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    padding: 30px;
    margin-bottom: 20px;
    .el-row {
      margin-left: -15px;
      margin-right: -15px;
      position: relative;
      box-sizing: border-box;
      .el-col {
        width: 25%;
        float: left;
        box-sizing: border-box;
        padding-left: 15px;
        padding-right: 15px;
        .divLable {
          margin-bottom: 10px;
          height: 18px;
          color: #887e7e;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
        }
        input {
          width: 270px;
          height: 40px;
          line-height: 40px;
          border: 1px solid #f8f5f5;
          background: #f8f5f5;
          border-radius: 6px;
          padding-left: 12px;
          padding-right: 12px;
        }
        .el-select {
          width: 270px;
          height: 40px;
          line-height: 40px;
          // border: 1px solid #f8f5f5;
          // background: #f8f5f5;
          // border-radius: 6px;
          // padding-left: 12px;
          // padding-right: 12px;
        }
        .divButton {
          float: right;
          .unimportance {
            height: 40px;
            border-radius: 20px;
            border: 0;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            text-align: center;
            line-height: 40px;
            padding-left: 26px;
            padding-right: 26px;
            cursor: pointer;
            outline: 0;
          }
        }
      }
    }
  }
  .divContent {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    .el-table .warning-row {
      background: oldlace;
    }
    button {
      background: #00be76;
      color: #fff;
      margin-left: 30px;
      margin-top: 20px;
      margin-bottom: 20px;
      height: 40px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
    }
    .operate {
      font-size: 13px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #ffb200;
      cursor: pointer;
      border-color: transparent;
      background: transparent;
      padding-left: 0;
      padding-right: 0;
      outline: 0;
      margin-left: 8px;
      margin-right: 8px;
    }
  }
}
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.table_class {
  &::v-deep {
    .el-table__body-wrapper::-webkit-scrollbar {
      /*width: 0;宽度为0隐藏*/
      width: 4px;
    }
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      border-radius: 6px;

      height: 5px;
      background: rgba(247, 227, 170, 0.9); //滚动条颜色
    }
    .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(247, 179, 179, 0.8);
      border-radius: 6px;
      background: rgb(255, 255, 255); //滚动条背景色
    }
  }
}
</style>
